<template>
  <div class="contain">
    <img src="../../assets/images/index.png" class="imgsize1" alt="" />
    <div class="content-padding">
      <div class="from">
        <input
          type="number"
          class="input-sty"
          v-model="phone"
          placeholder="请输入移动手机号码"
        />
        <div class="ct">
          <input
            type="number"
            v-model="yzm"
            class="input-sty posi"
            placeholder="请输入短信验证码"
          />
          <div class="left" @click="getYzm">{{ yzmText }}</div>
        </div>
        <div class="btn" @click="buy">
          <img src="../../assets/images/btn.png" class="imgsize2" alt="" />
        </div>
      </div>
      <div class="content">
        <div class="model1 flex-colum">
          <div class="img-title">
            <img src="../../assets/images/middle.png" class="mid-img" alt="" />
          </div>
          <div class="img-title">
            <img src="../../assets/images/ywsm.png" class="imgsize3" alt="" />
          </div>
          <div class="pre">
            <p>一、业务名称：咪咕快游钻石会员</p>
            <p>二、业务资费：20元/月</p>
            <p>三、业务说明：</p>
            <p>
              产品说明：咪咕快游钻石会员，资费20元/月，通过中国移动话费中扣取，开通/退订立即生效，支付方式为话费连续包月支付，未退订则按自然月续订并续费。如当月退订，下月才可重新订购。
            </p>
            <p>
              开通咪咕快游钻石会员即可获得云游戏时长，秒玩海量热门手游、3A主机大作！更有游戏礼包、专属流量、优先排队等特权助你所向披靡。
            </p>
            <p>四、活动内容:</p>
            <p>
              （1）活动期间，首次在本页面成功开通以下业务其中之一即可获得爆款会员月卡(任选1):芒果TV(月卡)、QQ音乐(月卡)、爱奇艺会员(月卡)、优酷VIP会员(月卡)、饿了么会员(月卡)、WPS会员(月卡)、酷狗豪华VIP(月卡)、网易云VIP(月卡)、哔哩哔哩会员(月卡)等，以实际页面为准。
            </p>
            <p>
              （2）点击进入<i class="font-sty" @click="goURl()">福利兑换中心</i
              >选择您需要的会员权益进行兑换，兑换成功后可前往权益所在平台激活使用。温馨提示:使用相关权益时，请遵守相应平台的用户服务协议和权益使用协议，如违反相关协议规定，运营商和联合权益提供方均有权单独进行处理包括但不限于中止或终止提供其所属平台的服务及要求侵权赔偿等。
            </p>
            <p>（3）权益有效时间核算：</p>
            <p>自首次开通业务起7日之内可领取爆款会员权益。</p>
            <p>
              （4）如对产品服务有任何疑问，可致电客服热线
              <i class="font-sty" @click="goTel()">400-991-5882</i>
              进行咨询。
            </p>
          </div>
        </div>
      </div>
      <DialogSb
        :visible="dialogVisible"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img">
          <img src="../../assets/images/error.png" class="imgsize1-1" alt="" />
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleSuess"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img" style="position: relative">
          <img
            src="../../assets/images/success.png"
            class="imgsize1-1"
            alt=""
          />
          <van-button
            round
            type="info"
            size="small"
            color="#fa9a3d"
            class="posi-ap"
            @click="goURl()"
            >领取权益</van-button
          >
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleConfig"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img posi-model">
          <img src="../../assets/images/config.png" class="imgsize1-3" alt="" />
          <div class="btn-box">
            <div @click="closeDialog" class="imgsize1-4" alt=""></div>
            <div @click="configBuy" class="imgsize1-4" alt=""></div>
          </div>
        </div>
      </DialogSb>
      <div class="loading-box" v-if="isLoading">
        <van-loading type="spinner" size="28px" vertical>加载中...</van-loading>
      </div>
    </div>
  </div>
</template>
<script>
import { sendSmsYzm, openBiz } from "@/api/user.js";
import DialogSb from "@/components/DialogView.vue";
import { Dialog } from "vant";
export default {
  name: "XhdlView",
  data() {
    return {
      isLoading: false,
      phone: "",
      yzm: "",
      countdown: 60,
      //订单号
      orderSn: "",
      yzmText: "获取验证码",
      errormessage: "手机号码错误",
      dialogVisible: false,
      dialogVisibleSuess: false,
      dialogVisibleConfig: false,
    };
  },
  components: {
    DialogSb,
  },
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    goTel() {
      window.location.href = "tel://" + "4009915882";
    },
    buy() {
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      if (!this.yzm) {
        this.$toast({
          message: "请输入验证码",
          duration: 2000,
        });
        return false;
      }
      this.dialogVisibleConfig = true;
    },
    configBuy() {
      var time = this.getCurrentDateTime();
      var reqData = {
        userKey: "TEST_USER",
        phone: this.phone,
        timestamp: time,
        orderSn: this.orderSn,
        smsCode: this.yzm,
      };
      this.isLoading = true;
      openBiz(reqData)
        .then((res) => {
          this.isLoading = false;
          if (res.data.state === 1) {
            //如果等于0就清除数据
            this.initData();
            this.dialogVisibleConfig = false;
            this.dialogVisibleSuess = true;
          }
          if (res.data.state === -1) {
            this.dialogVisibleConfig = false;
            this.dialogVisible = true;
          }
          if (res.data.state === 2) {
            this.dialogVisibleConfig = false;
            Dialog.alert({
              title: "温馨提示",
              message: res.data.message,
            }).then(() => {});
          }
        })
        .catch(() => {
          this.dialogVisibleConfig = false;
          this.isLoading = false;
          this.dialogVisible = true;
        });
    },
    initData() {
      (this.phone = ""), (this.yzm = "");
    },
    goURl() {
      window.location.href = "http://qy.hnyxtf.com:51020/";
    },
    djs() {
      // 如果倒计时还未结束，则不执行任何操作
      if (this.countdown !== 60) {
        return;
      }
      // 设置倒计时文本为六十秒
      this.yzmText = "60秒后重新获取";
      // 启动定时器，每秒更新倒计时文本，直到倒计时结束
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          this.yzmText = `${this.countdown}秒后重新获取`;
        } else {
          clearInterval(timer);
          this.yzmText = "获取验证码";
          this.countdown = 60; // 重置倒计时
        }
      }, 1000);
    },
    validatePhoneNumber(phone) {
      // 判断手机号是否为空
      if (!phone) {
        return "请输入手机号码";
      }
      // 判断手机号是否为数字且长度是否为11位
      if (!/^\d{11}$/.test(phone)) {
        return "手机号码必须为11位数字";
      }

      // 手机号验证通过
      return null;
    },
    getYzm() {
      //如果处于倒计时就不发
      if (this.countdown !== 60) {
        return;
      }
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      var time = this.getCurrentDateTime();
      var reqData = {
        userKey: "TEST_USER",
        phone: phone,
        timestamp: time,
      };
      console.log("reqData", reqData);
      this.isLoading = true;
      sendSmsYzm(reqData)
        .then((res) => {
          console.log(res);
          this.isLoading = false;
          if (res.data.state === -1) {
            Dialog.alert({
              title: "温馨提示",
              message: res.data.message,
            }).then(() => {});
          } else {
            this.djs();
            this.$toast({
              message: res.data.message,
              duration: 2000,
            });
            this.orderSn = res.data.data;
          }
        })
        .catch((error) => {
          // 处理超时或其他错误情况
          this.isLoading = false;
          console.error("请求发送短信验证码出错：", error);
          this.$toast({
            message: "请求发送短信验证码出错，请稍后重试",
            duration: 2000,
          });
        });
    },
    closeDialog() {
      this.dialogVisible = false; // 关闭对话框
      this.dialogVisibleSuess = false; // 关闭对话框
      this.dialogVisibleConfig = false; // 关闭对话框
    },
    showDialog() {
      this.dialogVisible = true;
    },

    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
  },
};
</script>

<style lang="less" scoped>
.font-sty {
  text-decoration: underline;
}
.from {
  position: relative;
  z-index: 0;
}
.contain {
  width: 100%;
  background: rgb(227, 60, 80);
}
.img-title {
  margin-top: 18px;
}
.imgsize4 {
  width: 257px;
  height: 31px;
  margin-bottom: 15px;
}
.imgsize1 {
  width: 100%;
  height: 418px;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 19px;
}
.imgsize3 {
  width: 175px;
  height: 29px;
  margin-bottom: 15px;
}
.imgsize2 {
  margin-top: 15px;
  width: 269px;
  height: 66px;
}
.content-padding {
  height: 1400px;
  padding: 19px 16px 36px 16px;
  box-sizing: border-box;
  background: rgb(227, 60, 80);
}
.input-sty {
  border-radius: 25px;
  width: 100%;
  height: 44px;
  border: none;
  background-color: #fff;
  /* 重置默认的背景颜色 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* 取消默认的内边距 */
  padding: 0;
  /* 取消默认的外边距 */
  margin: 0;
  /* 去除默认的外边框 */
  outline: none;
  text-indent: 0.5rem;
  font-size: 17px !important;
}
.input-sty::placeholder {
  font-size: 17px !important;
  color: #999; /* 设置为灰色 */
}
.posi {
  position: absolute;
  right: 0;
  top: 0;
}
.ct {
  margin-top: 13px;
  position: relative;
  height: 44px !important;
  .left {
    position: absolute;
    right: 0;
    top: 0;
    width: 144px;
    height: 44px;
    background: rgb(240, 134, 24);
    border-radius: 0px 22px 22px 0px;
    font-weight: 400;
    font-size: 17px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
  }
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 700px;
  .pre {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    background: rgb(227, 60, 80);
    line-height: 22px;
  }
}
.imgsize1-1 {
  width: 292px;
  height: 196px;
}
.imgsize1-3 {
  width: 292px;
  height: 281px;
}
.imgsize1-4 {
  width: 257px;
  height: 31px;
  background-color: transparent;
}
.posi-model {
  position: relative;
  .btn-box {
    width: 262px;
    position: absolute;
    right: 15px;
    bottom: 10px;
    display: flex;
    height: 60px;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    justify-content: space-between;
  }
}
.loading-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}
.imgsize7 {
  width: 100%;
}
.model1 {
  align-items: center;
  position: relative;
  width: 360px;
  margin-top: 26px;
  height: 547px;
  padding: 0 16px;
  background: rgb(227, 60, 80);
  box-sizing: border-box;
}
.sty {
  position: absolute;
  width: 54px;
  height: 48px;
  right: 0;
  top: -20px;
}
.model2 {
  align-items: center;
  position: relative;
  width: 360px;
  height: 983px;
  margin-top: 26px;
  padding: 0 16px;
  background-image: url(../../assets/images/model.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.posi-ap {
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mid-img {
  width: 340px;
  height: 457px;
}
</style>
